<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增入库</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <script src="js/switch.js"></script>
    <script src="https://unpkg.com/jelly-switch@0.2.3/lib/index.min.js"></script>

    <link rel="stylesheet" href="./css/pagination.css">
    <script src="./js/pagination.js"></script>

    <style>
        body {
            text-align: center;
        }


        tr td {
            font-size: 16px;
        }

        #table_div {
            width: 1400px;
            margin: 0 auto;
            padding-top: 100px;
            padding-left: 150px;
        }

        #table_div tr td {
            width: 300px;
            padding-bottom: 20px;
        }

        .form-group input{
            padding-left: 50px;
            width: 250px;
        }
    </style>

    <script>
        //获取页面数据，并封装成json格式数据
        $(function () {
            $("#add").click(function () {
                //获取用户输入数据
                let wareshouse_data = {
                    "goods_name_id": $("#goods_name").val(),
                    "norms": $("#norms").val(),
                    "type": $("#type").val(),
                    "price": $("#price").val(),
                    "number": $("#number").val(),
                    "total_price": $("#total_price").val(),
                    "Agent_name": $("#Agent_name").val(),
                    "comment": $("#comment").val(),
                    "supplier_id": $("#supplier").val(),
                    "in_Warehouse_time": $("#in_Warehouse_time").val(),
                    "keep_Warehouse_id": $("#keep_Warehouse").val()
                }

                //将获取的额数据封装成json格式
                let warehouseJson = {
                    Warehouse: JSON.stringify(wareshouse_data)
                }

                $.post("http://localhost:8080/warehouse/selectwarehousemangagment", warehouseJson, function (result) {
                    if (result.status === 200) {
                        alert("数据添加成功")
                    } else {
                        alert("数据添加失败")
                    }
                })


                // $.ajax({
                //     type: "GET",
                //     url: "http://localhost:8080/warehouse/insertwarehousemangagment",
                //     data: warehouseJson,
                //     contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                //     dataType: "Json",  dataType:服务器返回的数据类型 text/xml/script/html/json/jsonp
                //     success: function (result) {
                //         if (result.status === 200) {
                //             alert(warehouseJson)
                //         }if (result.status===405){
                //             console.log("添加失败")
                //         }
                //         else {
                //             console.log("添加失败")
                //         }
                //     }
                // })
            })
        });
    </script>
</head>
<body>
<div>
    <div class="btn-group-justified">


        <div class="" style="border: solid 1px #dddddd; height: 80px; margin-bottom: 30px">
            <div style="float: left; padding-left: 20px; padding-top: 20px;padding-bottom: 20px;">
                <span style="font-size:18px; line-height: 20px">新增入库单</span>
            </div>
            <div id="table_div">
                <div style="height: 50px"></div>
                <table id="" class=" ">
                    <tr>
                        <td>
                            <div class="form-group">
                                <label for="supplier">供应商名称</label>
                                <input type="text" class="form-control" id="supplier" name="supplier">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="in_Warehouse_time">入库时间</label>
                                <input type="datetime-local" class="form-control" id="in_Warehouse_time"
                                       name="in_Warehouse_time">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="keep_Warehouse">入库仓库</label>
                                <input type="text" class="form-control" id="keep_Warehouse" name="keep_Warehouse">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="Agent_name">经手人</label>
                                <input type="text" class="form-control " id="Agent_name" name="Agent_name">
                            </div>
                        </td>
                    </tr>

                </table>


                <div style="height: 50px"></div>
                <table id="content_top" class=" ">
                    <tr>
                        <td>
                            <div class="form-group">
                                <label for="goods_name">名称</label>
                                <input type="text" class="form-control" id="goods_name" name="goods_name">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="stock">库存</label>
                                <input type="text" class="form-control" id="stock" name="stock">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="norms">规格</label>
                                <input type="text" class="form-control" id="norms" name="norms">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="type">型号</label>
                                <input type="text" class="form-control" id="type" name="type">
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div class="form-group">
                                <label for="price">单价</label>
                                <input type="text" class="form-control" id="price" name="price">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="number">数量</label>
                                <input type="text" class="form-control" id="number" name="number">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="total_price">总价</label>
                                <input type="text" class="form-control" id="total_price" name="total_price">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <label for="comment">备注</label>
                                <input type="text" class="form-control" id="comment" name="comment">
                            </div>
                        </td>
                    </tr>

                </table>


                <button type="submit" style="margin-right: 0px; width: 100px" class="btn btn-info" id="add">添加</button>
            </div>

            <div style="float: left; padding-top: 20px;padding-bottom: 20px;">

                <div style="padding-left: 10px"><h3>入库记录</h3></div>


            </div>
        </div>
    </div>
    <div class="container-fluid">
        <table id="content" class="table table-bordered table-condensed table-striped table-hover">
            <tr>
                <th class="td text-center ">序号</th>
                <th class="text-center">库存</th>
                <th class="text-center">用品名称</th>
                <th class="text-center">规格</th>
                <th class="text-center">型号</th>
                <th class="text-center">单价</th>
                <th class="text-center">数量</th>
                <th class="text-center">总价</th>
                <th class="text-center">备注</th>
                <th class="text-center">操作</th>
            </tr>
        </table>

        <div id="pages">

        </div>

        <script>
            new Pagination({
                element: '#pages',  // 渲染的容器  [必填]
                type: 1,  // 样式类型，默认1 ，目前可选 [1,2] 可自行增加样式   [非必填]
                layout: 'total, sizes, home, prev, pager, next, last, jumper',  // [必填]
                pageIndex: 1, // 当前页码 [非必填]
                pageSize: 20, // 每页显示条数   TODO: 默认选中sizes [必填]
                pageCount: 9, // 页码显示数量，页码必须大于等于5的奇数，默认页码9  TODO:为了样式美观，参数只能为奇数， 否则会报错 [非必填]
                total: 1000, // 数据总条数 [必填]
                singlePageHide: false,  // 单页隐藏， 默认true  如果为true页码少于一页则不会渲染 [非必填]
                pageSizes: [5, 20, 30, 40, 50], // 选择每页条数  TODO: layout的sizes属性存在才生效
                prevText: '上一页', // 上一页文字，不传默认为箭头图标  [非必填]
                nextText: '下一页', // 下一页文字，不传默认为箭头图标 [非必填]
                ellipsis: true, // 页码显示省略符 默认false  [非必填]
                disabled: true, // 显示禁用手势 默认false  [非必填]
                currentChange: function (index, pageSize) {  // 页码改变时回调  TODO:第一个参数是当前页码，第二个参数是每页显示条数数量，需使用sizes第二参数才有值。
                    console.log(index, pageSize);
                }
            });
        </script>
    </div>
</div>
</body>
</html>